<template>
  <div class="home-page" ref="homePage">
     <div class="top-left-bg"></div>
     <div class="top-right-bg"></div>
     <div class="logo"></div>
     <div class="title"></div>
    <!-- 倒计时 -->
     <p class="count-down">距离活动结束时间：<span class="color-danger">{{countDown.days}}</span><span class="bolder">天</span><span class="color-danger">{{countDown.hours}}</span><span class="bolder">小时</span><span class="color-danger">{{countDown.minutes}}</span><span class="bolder">分</span><span class="color-danger">{{countDown.seconds}}</span><span class="bolder">秒</span></p>
    <!-- 报名入口 -->
     <div class="join">
       <button class="btn btn-join" @click="toJoin">我要报名</button>
     </div>
    <!-- 大赛数据概况 -->
     <div class="info">
       <div class="info-item">
         <p>参赛选手</p>
         <p>{{contestant}}</p>
       </div>
       <div class="info-item">
         <p>累计投票</p>
         <p>{{totalVote}}</p>
       </div>
       <div class="info-item">
         <p>访问量</p>
         <p>{{hitNum}}</p>
       </div>
     </div>
    <!-- 查询个人报名信息 -->
    <div class="search-wrap">
      <i class="icon icon-search"></i>
      <input type="text" placeholder="请输入姓名/编号" v-model="searchText">
      <button @click.stop="toSearch">查询</button>
    </div>
    <!-- 已报名小姐姐展示列表 -->
    <div class="list-wrap">
      <div class="list-title title-pretty-girl"></div>
      <ul class="list">
        <li class="item" v-for="prettyGirl in prettyGirls" :key="prettyGirl.id">
          <div class="card card-people">
            <h6 class="header">{{prettyGirl.number}}号 {{prettyGirl.nickName}}</h6>
            <div class="body pretty-gril-photo" :style="{backgroundImage: 'url('+ prettyGirl.photoUrl +')'}" @click="(toDetail(prettyGirl.id))">
              <!-- 投票 -->
              <div class="fixed-bottom">
                <div class="vote">
                  <span>{{prettyGirl.vote}}票</span>
                  <button class="btn btn-primary" @click.stop="toVote(prettyGirl.id)">投票</button>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <!-- 分页 -->
      <pagination class="m-b" :total="total" :current-page='condition.page' :display='size' @pagechange="prettyGirlPageChange"></pagination>
    </div>
    <!-- 特邀嘉宾 -->
    <div class="list-wrap">
      <div class="list-title title-tyjb has-bg"></div>
      <ul class="list">
        <li class="item" v-for="company in companys" :key="company.id">
          <div class="card card-company">
            <div class="header" v-if="company.logoUrl" :style="{backgroundImage: 'url('+ company.logoUrl +')'}"></div>
            <div class="body">
              <h5>{{company.name}}</h5>
              <p>{{company.leadPlace}} &nbsp; {{company.leadName}}</p>
              <!-- <button class="btn btn-default btn-outline" @click="toCompany">查看详情</button> -->
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Pagination from '../components/pagination'
import { toUnicode, decodeUnicode, getClientType, callOcFun } from '../libs/app'

export default {
  name: 'Home',
  components: {
    Pagination
  },
  data () {
    return {
      prettyGirls: [],
      companys: [
        {
          id: 1,
          logoUrl: '/beauty/static/img/0001.png',
          name: '徐州亮辉家具有限公司',
          leadName: '秦昶亮',
          leadPlace: '执行董事'
        },
        {
          id: 2,
          logoUrl: '/beauty/static/img/0002.png',
          name: '徐州和信投资发展有限公司',
          leadName: '韩旭',
          leadPlace: '总经理'
        },
        {
          id: 3,
          logoUrl: '/beauty/static/img/0003.png',
          name: '徐州市贵人缘家具有限公司',
          leadName: '段宏伟',
          leadPlace: '执行董事'
        },
        {
          id: 4,
          logoUrl: '/beauty/static/img/0004.png',
          name: '徐州市兰香阁家具有限公司',
          leadName: '李怀珠',
          leadPlace: '总经理'
        },
        {
          id: 5,
          logoUrl: '/beauty/static/img/0005.png',
          name: '江苏蓝江装饰集团',
          leadName: '曹化腾',
          leadPlace: '总经理'
        },
        {
          id: 6,
          logoUrl: '/beauty/static/img/0006.png',
          name: '创客资本',
          leadName: '王婷',
          leadPlace: '投资经理'
        },
        {
          id: 7,
          logoUrl: '/beauty/static/img/0007.png',
          name: '徐州市鑫睿家具有限公司',
          leadName: '段绪鑫',
          leadPlace: '执行董事'
        },
        {
          id: 8,
          logoUrl: '/beauty/static/img/0008.png',
          name: '徐州黑马科技有限公司',
          leadName: '张巍',
          leadPlace: '总监'
        }
      ],
      condition: {
        page: 1,
        size: 10 // 此处 size 无效，仅为防止接口报错，后台控制每页显示数量
      },
      searchText: '',
      endDate: '',   // 活动开始时间
      countDown: {
        days: '',
        hours: '',
        minutes: '',
        seconds: ''
      },
      total: 0,     // 记录总条数
      contestant: 0, // 选手数
      hitNum: 0,  // 访问量
      totalVote: 0, // 总投票数
      timeId: '',
      size: 0
    }
  },
  computed: {
    
  },
  methods: {
    queryInfo () {
      this.$http.simplePost('/beautyPageantController/getMatchOutLine', {}).then((data) => {
        this.endDate = data.voteEndTime
        this.contestant = data.contestant
        this.hitNum = data.hitNum
        this.totalVote = data.voteNumber

        this.setCountDown()
      })
    },
    queryList () {
      this.$http.complexPost('/beautyPageantController/getBeautyList', this.condition).then((data) => {
        
        this.prettyGirls = [];

        // 首次加载记录总条数
        if(this.condition.page == 1) {
          this.total = data.totalElements      
        }

        // 记录后台返回的size
        this.size = data.size
        // 记录当前页数
        this.current = this.condition.page

        data = data.content
        for(let i=0,len=data.length; i<len; i++) {
          this.prettyGirls.push({
            id: data[i].id,
            number: data[i].id,
            nickName: decodeUnicode(data[i].signName),
            photoUrl: data[i].imageUrl,
            vote: data[i].voteNum
          })
        }
      })
    },
    toJoin () {      
      if(this.$inApp && (getClientType() === 'android')) {
        callOcFun('toJoin', {url: `${process.env.API_HOST}/beauty/index.html#/join`})
        return
      }
      this.$router.push('/join')
    },
    toSearch () {
      debugger
      this.condition.signName = toUnicode(this.searchText)
      this.queryList()
    },
    toVote (id) {
      let self = this

      if(!this.$inApp) {
        this.$messagebox.confirm('下载香肠树App,为你心爱的小姐姐投一票吧').then(action => {        
          // 不在本地应用内，跳转下载应用链接
          window.open(self.$url, '_self')          
        })
      } else {
        this.$http.complexPost('/beautyPageantController/vote', {beautyId: id, serverToken: this.$token}).then(data =>{
          this.queryList()
        })
      }
    },
    toCompany () {
      debugger
      // TODO: 查看详情，路由跳转
    },
    toDetail (id) {
      this.$router.push({name: 'Detail', params:{id: id}});
    },
    prettyGirlPageChange (currentPage) {
      this.condition.page = currentPage
      this.queryList()
    },
    setCountDown () {
      this.timeId = setTimeout(this.setTime, 1000, null)

      // setInterval 实现倒计时
      // this.intervalId = setInterval(function() {
      //   alert('timer')
      //   let nowDate = new Date()
      //   let nowHms = nowDate.getTime()
      //   let cha = endHms - nowHms

      //   if(cha > 0) {
      //     let days = parseInt(cha/(1000*60*60*24))
      //     let hours = parseInt((cha % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      //     let minutes = parseInt(((cha % (1000 * 60 * 60 * 24)) % (1000 * 60 * 60)) / (1000 * 60))
      //     let seconds = parseInt((((cha % (1000 * 60 * 60 * 24)) % (1000 * 60 * 60)) % (1000 * 60)) / 1000)
          
      //     self.countDown.days = days
      //     self.countDown.hours = hours
      //     self.countDown.minutes = minutes
      //     self.countDown.seconds = seconds
      //   } else {
      //     clearInterval(self.intervalId)
      //   }
      // }, 1000)
    },
    setTime () {      
      let self = this
      // ios 不支持 new Date
      let endDate = new Date(this.endDate.replace(/-/g, '/'))
      let endHms = endDate.getTime()
      let nowDate = new Date()
      let nowHms = nowDate.getTime()
      let cha = endHms - nowHms

      if(cha > 0) {
        let days = parseInt(cha/(1000*60*60*24))
        let hours = parseInt((cha % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
        let minutes = parseInt(((cha % (1000 * 60 * 60 * 24)) % (1000 * 60 * 60)) / (1000 * 60))
        let seconds = parseInt((((cha % (1000 * 60 * 60 * 24)) % (1000 * 60 * 60)) % (1000 * 60)) / 1000)
        
        self.countDown.days = days
        self.countDown.hours = hours
        self.countDown.minutes = minutes
        self.countDown.seconds = seconds

        self.timeId = setTimeout(self.setTime,1000, null)
      }
    },
  },
  mounted () {
    this.queryInfo()
    this.queryList()


  },
  destroyed () {
    this.$indicator.close()
    clearInterval(this.intervalId)
  }
}
</script>

<style scoped>
  .home-page {
    background-color: #7a0bed;
    position: relative;
    /* min-height: 100%; */
    /* overflow: hidden; */
  }
  .home-page .top-left-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 400px;
    background-image: url(../../static/img/top-bg-left.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
  }
  .home-page .top-right-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 370px;
    height: 915px;
    background-image: url(../../static/img/top-bg-right.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
  }
  .home-page .logo {
    position: absolute;
    top: 0;
    right: 40px;
    width: 105px;
    height: 133px;
    background-image: url(../../static/img/logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
  .home-page .title {
    position: relative;
    z-index: 2;
    width: 654px;
    height: 246px;
    background-image: url(../../static/img/top-title.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    padding-top: 100px;
    margin: 0px auto 50px;
  }
  .home-page .count-down {
    position: relative;
    z-index: 2;
    font-size: 26px;
    margin: 10px auto;
  }
  .home-page .count-down .bolder {
    font-weight: bold;
    margin: 0 10px;
  }
  .home-page .join {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    padding-top: 80px;
    padding-bottom: 100px;
    background-image: url(../../static/img/join-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 150% 120%;
  }
  .home-page .join .btn-join {
    width: 500px;
    height: 80px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(to right, #2cbee3, #adfd7f 48%);
    color: #fff;
    font-size: 34px;
    letter-spacing: 5px;
  }
  .home-page .info {
    position: relative;
    top: -80px;
    z-index: 1;
    font-size: 37px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    height: 300px;
    background-image: url(../../static/img/shape-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 150% 120%;
  }
  .home-page .info .info-item {
    position: relative;
    width: 33.33%;
    text-align: center;
  }
  .home-page .info .info-item::after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    display: inline-block;
    height: 100px;
    width: 1px;
    background-color: #c8aeff;
  }
  .home-page .info .info-item:last-child::after {
    display: none;
  }
  .home-page .info .info-item p:first-child {
    margin-bottom: 20px;
  }
  .home-page .search-wrap {
    position: relative;
    z-index: 1;
    width: 680px;
    height: 70px;
    background-color: #fff;
    padding: 15px 0;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    border-radius: 10px;
    margin-top: -50px;
  }
  .home-page .search-wrap .icon {
    margin: 0 25px;
    font-size: 46px;
    color: #d5d5d5;
  }
  .home-page .search-wrap input {
    height: 100%;
    line-height: 45px;
    border: none;
    outline: none;
    font-size: 32px;
    flex-grow: 2;
    border-right: 1px solid #ddd;
  }
  .home-page .search-wrap ::-webkit-input-placeholder {
    color: #d5d5d5;
  }
  .home-page .search-wrap button {
    height: 100%;
    min-width: 150px;
    font-size: 32px;
    border: none;
    background: transparent;
  }
  .home-page .list-wrap {
    margin-bottom: 65px;
  }
  .home-page .list-title {
    height: 125px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 30px auto;
  }
  .home-page .list-title.title-pretty-girl {
    background-image: url(../../static/img/title-01.png);
  }
  .home-page .list-title.title-tyjb {
    background-image: url(../../static/img/title-02.png);
  }
  .home-page .list {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    padding: 0 15px;
  }
  .home-page .list .item {
    width: 50%;
  }
  .home-page .card {
    margin: 15px auto;
  }
  .home-page .card-people {
    width: 340px;
  }
  .home-page .card-people .header {
    height: 55px;
    background-image: url('../../static/img/card-people-title.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 90%;
    font-size: 26px;
    text-align: left;
    line-height: 55px;
    padding-left: 25px;
  }
  .home-page .card-people .body {
    position: relative;
    width: 340px;
    height: 475px;
    overflow: hidden;
    border-radius: 10px;
  }
  .home-page .card-people .body.pretty-gril-photo {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .home-page .card-people .body .fixed-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .home-page .card-people .body .vote {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    height: 80px;
    background-color: rgba(255,255,255,0.5);    
  }
  .home-page .card-people .body .vote span {
    font-size: 28px;
    color: #333;
  }  
  .home-page .card-people .body .vote button {
    border: none;
    background-color: #5f16b3;
    border-radius: 25px;
    color: #fff;
    padding: 5px 15px;
    font-size: 24px;
  }
  .home-page .card-company {
    background-color: #fff;
    width: 340px;
    border-radius: 20px;
  }
  .home-page .card-company .header {
    height: 235px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .home-page .card-company h5 {
    font-size: 26px;
    color: #333;
    height: 50px;
    line-height: 50px;
  }
  .home-page .card-company p {
    font-size: 20px;
    color: #999;
  }
  .home-page .card-company button {
    background: #fff;
    color: #666;
    font-size: 20px;
    border: 1px solid #ddd;
    border-radius: 2px;
    min-width: 145px;
    margin: 35px auto;
    padding: 6px 25px;
  }
  .home-page .card-company .body {
    padding-bottom: 50px;
  }
</style>
